<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "/stylesheets/tasks.css" %>
    <%= stylesheet_link_tag "/stylesheets/images.css" %>
    <%= stylesheet_link_tag "/javascripts/ext/ux/css/ColumnNodeUI.css" %>

    <%= javascript_include_tag "ext/adapter/ext/ext-base.js" %>
    <%= javascript_include_tag "ext/ext-all.js" %>
    <%= javascript_include_tag "ext/ux/ColumnNodeUI.js" %>
    <%= javascript_include_tag "ext/src/locale/ext-lang-zh_CN.js" %>


    <script type="text/javascript">
      Ext.onReady(function(){

        var tree = new Ext.ux.tree.ColumnTree({
          width: 650,
          height: 600,
          rootVisible:false,
          autoScroll:true,
          title: 'Products',
          renderTo: 'tree-div',
          columns:[{
              header:'id',
              width:330,
              dataIndex:'id'
            },{
              header:'规格',
              width:100,
              dataIndex:'spec'
            },{
              header:'单价',
              width:100,
              dataIndex:'unit_price'
            },{
              header:'数量',
              width:100,
              dataIndex:'quantity'
            }],

          loader: new Ext.tree.TreeLoader({
            dataUrl:'/test/getTreeData',
            uiProviders:{
              'col': Ext.ux.tree.ColumnNodeUI
            }
          }),

          root: new Ext.tree.AsyncTreeNode({
            id:0,
            text:'Products'
          }),
          bbar: [{
              text: '添加新产品',
              iconCls: 'addItem',
              handler : function(){
                
                var Product = warehousingEntryGrid.getStore().recordType;
                var productRecord = new Product({
                  product_name: '请选择产品'
                });
                warehousingEntryDS.insert(0, productRecord);
              }
            },{
              text: '编辑产品',
              iconCls: 'editItem',
              handler : function(){
                var record = warehousingEntrySM.getSelected();
                if (!record) {
                  return false;
                }
                warehousingEntryDS.remove(record);
              }
            },{
              text: '删除产品',
              iconCls: 'remove',
              handler : function(){
                var record = warehousingEntrySM.getSelected();
                if (!record) {
                  return false;
                }
                warehousingEntryDS.remove(record);
              }
            }]
        
        });
        //右键菜单
        var productRightMenu = Ext.create('Ext.menu.Menu', {
          id: 'product_right_menu',
          items: [
            Ext.create('Ext.menu.Item', {
              text: '添加',
              handler: rightMenuProductTreeFn
            }),
            Ext.create('Ext.menu.Item', {
              text: '删除',
              handler: rightMenuProductTreeFn
            }),
            Ext.create('Ext.menu.Item', {
              text: '更新',
              handler: rightMenuProductTreeFn
            }),
            Ext.create('Ext.menu.Item', {
              text: '刷新',
              handler: rightMenuProductTreeFn
            })
          ]});
        function rightMenuProductTreeFn(item,e){
          alert(item.text);
        }

        tree.on("contextmenu",function(node,e){
          e.preventDefault();
          node.select();
          productRightMenu.showAt(e.getXY());
        });
        
        tree.on('beforeload',
        function(node){
          tree.loader.dataUrl='/test/getTreeData?node_id='+node.id; //定义子节点的Loader
        });
      });
    </script>
  </head>
  <body>    
    <div id="tree-div"></div>
  </body>
</html>
